<template>
	<u-popup :show="popup_show" mode="center" :safeAreaInsetBottom="false" :mask-close-able="false" bgColor="#ffffff"
		round="15">
		<view class="popup">
			<view class="popup-wrap">
				<view class="title-line">
					<text class="title">{{ title }}</text>
					<image src="@/static/images/close.png" class="close-ioc" @tap="cancel()" v-if="!is_sign"></image>
				</view>
				<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower()">
					<view class="content">
						<rich-text :nodes="detailsData.content"></rich-text>
					</view>
					<view style="padding: 0rpx 30rpx; font-size: 28rpx; color: #333" v-if="is_sign">
						{{$t('wanlAgree-qmq')}}
					</view>
					<view style=" padding: 0 24rpx;box-sizing: border-box;margin-top: 10rpx;" v-if="is_sign">
						<view class="canvas-main" style="background:#F4F4F4 ;">
							<canvas :style="'width:'+width+'rpx;height:'+height+'rpx;'" class="canvas-item"
								disable-scroll="true" canvas-id="canvasId" @touchstart="touchstart"
								@touchmove="touchmove" @touchend="touchend" @error="error"></canvas>
						</view>
					</view>
				</scroll-view>
				<view class="btn-list" v-if="is_sign">
					<view v-if="isBottom" class="btn-complete" @click.stop="save">{{$t('wanlAgree-tongyianniu')}}</view>
					<view v-if="!isBottom" class="btn-reset">{{$t('wanlAgree-tongyianniu')}}</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import htmlParser from "@/common/html-parser";
	import wanlshop_config from '@/common/config/config';
	export default {
		components: {},
		data() {
			return {
				id: null,
				title: "",
				detailsData: {
					content: ""
				},
				popup_show: false,
				type: "",
				isBottom: false,
				windowWidth: 0,
				pixelRatio: 0,
				width: 660,
				height: 500,
				bgColor: '#F4F4F4',
				lineWidth: 6,
				context: null,
				lineColor: '#000',
				fileType: 'png',
				points: [],
				oldPoints: [],
				is_sign: true,
				action: wanlshop_config.appurl + '/common/upload'
			};
		},
		mounted() {
			this.start()
		},
		methods: {
			start() {
				const systemInfo = uni.getSystemInfoSync()
				this.windowWidth = systemInfo.windowWidth
				this.pixelRatio = systemInfo.pixelRatio
				this.context = uni.createCanvasContext('canvasId', this)
				this.context.fillStyle = this.bgColor
				const width = this.width / 750 * this.windowWidth
				const height = this.height / 750 * this.windowWidth
				const lineWidth = 6 / 750 * this.windowWidth
				this.context.fillRect(0, 0, width, height)
				this.context.lineWidth = lineWidth
				this.context.strokeStyle = this.lineColor
				this.context.lineCap = 'round'
				this.context.lineJoin = 'round'
				this.context.stroke()
				this.context.draw(true)
			},
			touchstart(e) {
				this.points.push({
					x: e.changedTouches[0].x,
					y: e.changedTouches[0].y
				})
				this.context.beginPath()
			},
			show(id, title, checked, is_sign) {
				uni.showLoading({
					title: "加载中",
				});
				this.id = id;
				this.title = title;
				this.detailsData = {
					content: ""
				};
				this.loadData({
					id: id
				});
				this.popup_show = true;
				if (is_sign === false) {
					this.is_sign = false
				} else {
					this.is_sign = true
				}
			},
			touchmove(e) {
				this.points.push({
					x: e.changedTouches[0].x,
					y: e.changedTouches[0].y
				})
				this.oldPoints = JSON.parse(JSON.stringify(this.points))
				if (this.points.length > 1) {
					this.context.moveTo(this.points[0].x, this.points[0].y)
					this.context.lineTo(this.points[1].x, this.points[1].y)
					this.points.splice(0, 1)
					this.context.stroke()
					this.context.draw(true)
				}
			},
			touchend(e) {
				this.points = []
			},
			reset() {
				this.context = null
				this.points = []
				this.oldPoints = []
				this.start()
			},
			cancel() {
				this.popup_show = false;
			},
			save() {
				if (this.oldPoints.length == 0) {
					uni.showToast({
						title: this.$t('wanlAgree-toast-wqm'),
						icon: 'none'
					})
					return
				}
				let self = this
				uni.canvasToTempFilePath({
					canvasId: 'canvasId',
					fileType: self.fileType,
					quality: 1,
					width: self.width,
					height: self.height,
					destWidth: self.width * self.pixelRatio,
					destHeight: self.height * self.pixelRatio,
					success: (res) => {
						if (self.action) {
							uni.showLoading()
							uni.uploadFile({
								url: self.action, //图片上传post请求的地址
								filePath: res.tempFilePath,
								name: "file",
								formData: {
									user: 'test'
								},
								header: self.header,
								success: (uploadFileRes) => {
									uni.hideLoading()
									self.popup_show = false;
									self.$emit('agree', JSON.parse(uploadFileRes.data).data.url)
									self.reset()
								},
								fail: (error) => {
									uni.hideLoading()
								}
							});
						}
					},
					fail: (err) => {
						console.log('生成图片失败:', err)
					}
				}, self)
			},
			error(e) {
				console.log('错误信息：', e)
			},
			// 异步加载
			async loadData(data) {
				await uni.request({
					url: "/wanlshop/article/details",
					data: data,
					success: (res) => {
						//详情正则
						res.data.content = res.data.content.replace(
							/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
							(match, capture) => {
								var img =
									`<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture,500,0)}">`;
								return img;
							}
						);
						this.detailsData = res.data;
					},
					complete: () => {
						uni.hideLoading();
					},
				});
			},
			scrolltolower() {
				this.isBottom = true
			},
		},
	};
</script>

<style lang="scss" scoped>
	.popup {
		width: 710rpx;
		padding: 20rpx 0;
	}

	.canvas-main {
		width: 100%;
		height: auto;


	}

	.btn-list {
		width: 100%;
		height: 150rpx;
		background: #FEFFFE;
		box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-around;

		.btn-reset {
			width: 100%;
			margin: 20rpx 20rpx 0;
			height: 96rpx;
			background: #f4f4f4;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 30rpx;
			color: #3E3E3E;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn-complete {
			width: 100%;
			margin: 20rpx 20rpx 0;
			height: 96rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			background-color: #327CFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.popup-wrap {
		background: #ffffff;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border-radius: 20rpx;

		.title-line {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.title {
				margin: 0 auto;
				line-height: 130rpx;
				font-size: 38rpx;
				color: #000000;
				font-weight: bold;
			}

			.close-ioc {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				right: 30rpx;
			}
		}

		.scroll-y {
			height: 60vh;
		}

		.content {
			padding: 0rpx 30rpx;
		}

		.btn-view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 40rpx 30rpx;

			.bg-orange {
				width: 100%;
				height: 96rpx;
				background: #327CFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}

			.bg-orange {}
		}

		.root-view {
			background: #f6f6f6;
			height: 100rpx;
			display: flex;
			/* align-items: center; */
			justify-content: center;
			padding: 27px;
		}

		.btn-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.btn {
			width: 177rpx;
			height: 65rpx;
			border-radius: 20rpx;
			background: #fff;
			line-height: 65rpx;
			text-align: center;
			font-weight: 500;
			font-size: 24rpx;
		}

		.delBtn {
			border: 1rpx solid #3238ec;
			color: #333333;
			margin-right: 32rpx;
		}

		.saveBtn {
			background: #3238ec;
			color: #ffffff;
		}

		.handWriting {
			background: #fff;
			width: 680rpx;
			height: 783rpx;
			border-radius: 20rpx;
		}

		.handCenter {
			margin-bottom: 36rpx;
		}
	}
</style>